<template>
  <div class="libs-charts" v-loading="loading">
    <div class="subject">库区使用情况</div>
    <div class="chart" ref="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getareaUseStatus } from '@/api/dashboard'
export default {
  name: 'LibsCharts',
  data () {
    return {
      loading: false,
      data: [
        { value: 480, name: '拣货区' },
        { value: 735, name: '出货区' },
        { value: 580, name: '暂存库区' },
        { value: 484, name: '进货暂存区' },
        { value: 300, name: '出货暂存区' }
      ]
    }
  },
  created () {
    this.getareaUseStatus()
  },
  methods: {
    async getareaUseStatus () {
      await getareaUseStatus()
      // console.log(res)
      this.getChart()
    },
    getChart () {
      const data = this.data
      const myChart = echarts.init(this.$refs.chart)
      myChart.resize({
        width: '800px',
        height: '354px'
      })
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{b}:{d}%'
        },
        legend: {
          orient: 'vertical',
          icon: 'circle',
          left: '60%',
          top: 'center',
          formatter: function (name) {
            const sum = data.reduce((pre, item) => {
              return pre + item.value
            }, 0)
            for (let k = 0; k < data.length; k++) {
              if (name === data[k].name) {
                return `{a|${data[k].name}}{b|${
                  ((data[k].value / sum) * 100).toFixed(2) + '%'
                }}{c|${data[k].value}}`
              }
            }
          },
          textStyle: {
            rich: {
              a: {
                color: '#000',
                width: 100
              },
              b: {
                color: '#000',
                width: 70
              },
              c: {
                color: '#000'
              }
            }
          }
        },
        series: [
          {
            type: 'pie',
            radius: '60%',
            left: '-30%',
            avoidLabelOverlap: false,
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              position: 'inner',
              color: '#fff',
              formatter: '{c}',
              fontSize: 20
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 480, name: '拣货区' },
              { value: 735, name: '出货区' },
              { value: 580, name: '暂存库区' },
              { value: 484, name: '进货暂存区' },
              { value: 300, name: '出货暂存区' }
            ]
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .libs-charts {
    width: 70%;
    height: 354px;
    background: #fff;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    border-radius: 12px;
    padding: 25px;
    .subject {
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #332929;
      line-height: 22px;
    }
    .chart {
      width: 70%;
      height: 354px;
    }
  }
</style>
